<template>
  <el-menu
      :default-active="route.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#42b983"
      text-color="#fff"
      active-text-color="#ffd04b"
      :ellipsis="false"
      @select="handleSelect"
      :router="true"
      style="font-family: 岩田仿宋,serif"
  >
    <el-menu-item>
      <img
          style="width: 10vh;height: auto"
          src="../assets/images/new-logo3.png"
          alt="Element logo"
      />
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="/HomePage">{{ $t('route.HomePage') }}</el-menu-item>
    <el-menu-item index="/AboutUs">{{ $t('route.AboutUs') }}</el-menu-item>
    <el-menu-item index="/LatestNews">{{ $t('route.LatestNews') }}</el-menu-item>
    <el-menu-item index="/Commodity">{{ $t('route.Commodity') }}</el-menu-item>
    <el-sub-menu index="/Commodity">
      <template #title>{{ $t('route.CommodityClassification') }}</template>
      <el-menu-item index="/CommodityInfo" @click="choseCommodity(this.$t('commodity.qingye'))">
        <el-icon><img class="menu-item-icon" src="../assets/images/空气-绿叶.png"></el-icon>
        <span>{{$t('commodity.qingye')}}</span>
      </el-menu-item>
      <el-menu-item index="/CommodityInfo" @click="choseCommodity(this.$t('commodity.yinghua'))">
        <el-icon><img class="menu-item-icon" src="../assets/images/樱花.png"></el-icon>
        <span>{{$t('commodity.yinghua')}}</span>
      </el-menu-item>
      <el-menu-item index="/CommodityInfo" @click="choseCommodity(this.$t('commodity.qingzhu'))">
        <el-icon><img class="menu-item-icon" src="../assets/images/青竹.png"></el-icon>
        <span>{{$t('commodity.qingzhu')}}</span>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/Mine">{{ $t('route.Mine') }}</el-menu-item>
    <el-sub-menu index="6">
      <template #title>{{ $t('route.SwitchLanguage') }}</template>
      <el-menu-item @click="changeLang('zh')">中文</el-menu-item>
      <el-menu-item @click="changeLang('en')">English</el-menu-item>
      <el-menu-item @click="changeLang('ja')">日本語.</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import {useI18n} from 'vue-i18n'
import {useRoute} from 'vue-router'
import { useStore } from 'vuex';
import bus from '../bus';
import { ElMessage } from 'element-plus'

const store=useStore()
const route=useRoute()

const handleSelect = (key: string, keyPath: string[]) => {
  sessionStorage.setItem('currentPath', key)
  console.log(key, keyPath)
}

// 切换语言
const {locale} = useI18n()
const changeLang = (type: string) =>{
  locale.value = type
  localStorage.setItem('lang',type)
  let message='切换成功'
  if(type === 'en'){
    message = 'Switchover successful'
  }else if(type ==='ja'){
    message = '切り替え成功です'
  }
  ElMessage({
    message: message,
    grouping: true,
    type: 'success',
  });
}

// 选择商品详情
const choseCommodity=(commodity:string)=>{
  bus.emit('choseCommodity',commodity)
}

</script>
<style scoped>
.flex-grow {
  flex-grow: 1;
}

.el-menu-demo {
  position: fixed; /* 固定位置 */
  top: 0; /* 距离浏览器顶部为0 */
  left: 0; /* 距离浏览器左侧为0 */
  right: 0; /* 距离浏览器右侧为0 */
  z-index: 999; /* 确保菜单在其他内容之上 */
  margin: 0; /* 移除外部边距 */
  padding: 0; /* 移除内部边距 */
  width: 100%; /* 宽度为100%，确保填满整个浏览器宽度 */
}

/* 如果需要，可以添加额外的样式来处理页面内容的滚动 */
body {
  /*padding-top: 菜单的高度; !* 根据你的菜单高度来设置，确保内容不会被菜单遮挡 *!*/
  margin: 0; /* 移除默认的body边距 */
}

.menu-item-icon {
  /* 假设 el-menu-item 的高度是 50px */
  max-height: 50px; /* 或者使用 100% 如果 el-menu-item 的高度是动态的 */
  max-width: 100%; /* 图片宽度自适应，但不超过其容器宽度 */
  width: auto; /* 保持图片的原始宽高比 */
  height: auto; /* 保持图片的原始宽高比 */
  vertical-align: middle; /* 垂直居中图片 */
  display: inline-block; /* 确保图片可以和其他元素在同一行显示 */
}
</style>